<template>
	<view :style="viewColor">
		<skeleton :show="showSkeleton" :isNodes="isNodes" ref="skeleton" loading="chiaroscuro" selector="skeleton"
			bgcolor="#FFF"></skeleton>
		<view class="navTabBox" v-if="!circle_id">
			<view class="longTab">
				<view class="tab-item" v-for="(item,index) in tabList" :key="index" :class="{'on':index == tabIndex-1}" @click="bindTab(index)">
					<text>{{item.title}}</text>
				</view>
			</view>
		</view>
		<view class='productSort' :style="{visibility: showSkeleton ? 'hidden' : 'visible', height: winHeight+ 'px' }">
			<view class="con-box">	
				<view class='aside'>	
					<scroll-view scroll-y="true" style="height: 100%; overflow: hidden;" scroll-with-animation='true' :scroll-into-view="intoindex">
						<view v-for="(item,index) in productList" v-bind:key="index">
							<view class='item' :class='index==navActive?"on":""' :key="item.label_id" @click='tap(index)' :id='"sort"+index'><text class="item_text skeleton-rect">{{item.label_name}}</text>
							 </view>
						</view>
						<view style='height:100rpx;'></view>
					</scroll-view>
				</view>
				<view class='conter'>
					<scroll-view scroll-y="true" :scroll-into-view="toView" style="height: 100%; overflow: hidden;" @scrolltolower="loadMoreData" scroll-with-animation='true'>
						<view class="list-content">
							<!-- <view class='listw' v-if="productList_children.length">
								<swiper class="swiper_list_user">
									<swiper-item class="list_user" v-for="(p_list, p_index) in productList_children" :key="p_index">
										<view class="children_label" v-for="(item, index) in p_list" :key="index" :class="navActive2 == item.label_id ? 'children_label_on' : ''" @click='tap2(item.label_id)'>{{item.label_name}}</view>
									</swiper-item>
								</swiper>
							</view> -->
							<view v-if="list_circle.length" class="list">
								<view v-for="(item, index) in list_circle" :key="index" class="item-content">
									<view class='item-avatar'>
										<image @click="goUserDetail(item.uid)" :src="item.avatar || '/static/images/f.png'" />
										<view class="item-user-icon">
											<image v-if="!item.is_start" @click.stop="followAuthor(index, 1)" :src="domain + '/uploads/def/20230709/128e2b523dc46080c40bf86b5bde2c83.png'" />
											<image v-else @click.stop="followAuthor(index, 0)" :src="domain + '/uploads/def/20230709/5e62394195454a9c2894ae3865495547.png'" />
										</view>
									</view>
									<view @click="goUserDetail(item.uid)" class='item-nickanme line1'>
										{{item.nickname}}
									</view>
									<view @click="goUserDetail(item.uid)" class='item-label line1'>
										{{item.label[1] ? item.label[1] : item.label[0]}}
									</view>
									<view class="tab-wx" @click="getUserContactInformations(item, 'we_chat_account', 1)">加微信</view>
								</view>
							</view>
							<emptyPage v-else title="正在加载中···"></emptyPage>
						</view>
						<view style='height:100rpx;'></view>
					</scroll-view>
				</view>
			</view>
		</view>
		<view class="foot" v-if="newData.status && newData.status.status">
			<view class="page-footer" id="target" :style="{'background-color':newData.bgColor.color[0].item}">
				<view class="foot-item" v-for="(item,index) in newData.menuList" :key="index"
					@click="goRouter(item)">
					<block v-if="index != 2">
						<block v-if="item.link == activeRouter">
							<image :src="item.imgList[0]"></image>
							<view class="txt" :style="{color:newData.activeTxtColor.color[0].item}">{{item.name}}
							</view>
						</block>
						<block v-else>
							<image :src="item.imgList[1]"></image>
							<view class="txt" :style="{color:newData.txtColor.color[0].item}">{{item.name}}</view>
						</block>
					</block>
					<block v-else>
						<image class="foot-item-add" :src="item.imgList[0]"></image>
						<view class="txt" style="font-size: 22rpx;margin-bottom: 40rpx;color: rgba(50, 50, 50, 1);">发布</view>
					</block>
				</view>
			</view>
		</view>
		<labelListPopup :is_label_list_popup="is_label_list_popup" :labelList="productList" :tabId="navActive" @onChangeTag="onChangeTag"></labelListPopup>
		
		<!-- 手机号微信查看弹窗 -->
		<view class="popup_user_contact" v-if="is_popup_user_contact" @click="is_popup_user_contact=false">
			<view class="popup_user_contact_c">
				<view class="popup_user_contact_h">
					<view class="popup_user_contact_t">提示</view>
					<view class="popup_user_contact_u">{{popup_user_contact_type == 'phone' ? '电话：' : '微信号：'}}<text>{{popup_user_contact}}</text></view>
				</view>
				<view class="popup_user_contact_b">
					<view class="popup_user_contact_close" @click="is_popup_user_contact=false">取消</view>
					<view class="popup_user_contact_copy" @click="copyUserContact">复制</view>
				</view>
			</view>
		</view>
		
		<!-- 升级VIP弹窗 -->
		<view class="user_vip_tips" v-if="user_vip_tips">
			<view class="user_vip_back"></view>
			<view class="user_vip_content">
				<view class="user_vip_close" @click="user_vip_tips = false">
					<image src="https://ly.jukee.net/uploads/default/20230803/8d5635ef7c1504bfadbd85f0a04270cc.png" />
				</view>
				<view class="user_vip_icon">
					<image src="https://img.jukee.net/def/3902e202311271626269626.png" />
				</view>
				<view class="user_vip_title font-size32-bold">成为VIP会员</view>
				<view class="user_vip_tit font-size36-bold" style="font-size: 46rpx;">无限添加客户微信<br/>查看所有客户联系方式</view>
				<view class="user_vip_messag">更多权益请在 “我的” 会员中心查看</view>
				<view class="user_vip_btn" @click="goUrl('/pages/annex/vip_paid/index')">确定</view>
			</view>
		</view>
		<view class="back_popup flex-aj-center" @click="wechat_qrcode_img = ''" v-if="wechat_qrcode_img">
			<image :src="wechat_qrcode_img" style="width: 500rpx;border-radius: 20rpx;" mode="widthFix" @click="previewImage(wechat_qrcode_img)">
		</view>
	</view>
</template>
<script>
	let app = getApp(); 
	import { getLabelList } from '@/api/api.js';
	import { getNavigation } from '@/api/public.js'
	import { recommendCustom, getUserContactInformation } from '@/api/user.js';
	import {  followAuthorApi } from '@/api/community.js';
	import { configMap } from '@/utils/index';
	// #ifndef H5
	import passwordPopup from '@/components/passwordPopup';
	// #endif
	import easyLoadimage from '@/components/easy-loadimage/easy-loadimage.vue';
	import labelListPopup from '@/components/labelListPopup'
	import emptyPage from '@/components/emptyPage.vue'
	import { mapGetters } from "vuex";
	import { HTTP_REQUEST_URL } from '@/config/app';
	export default {
		components: {
			easyLoadimage,
			// #ifndef H5
			passwordPopup,
			// #endif
			labelListPopup,
			emptyPage,
		},
		computed: configMap({navigation: {}},mapGetters(['isLogin','viewColor','keyColor'])),
		data() {
			let active = 1;
			return {
				domain: HTTP_REQUEST_URL,
				showSkeleton: true, //骨架屏显示隐藏
				isNodes: 0, //控制什么时候开始抓取元素节点,只要数值改变就重新抓取
				navlist: [],
				hotList: [], //推荐分类
				productList: [],
				navActive: 0,
				navActive2: -1,
				activceCate: active,
				number: "",
				height: 0,
				hightArr: [],
				toView: "",
				winHeight: 0,
				pidIndex: 0,
				intoindex: "",
				pid: '',
				newData: {},
				activeRouter: '',
				keywords: '',
				productList_children: [],
				list_circle: [],
				list_host_circle: [],
				label_id: 0,
				label_id2: 0,
				page: 1,
				limit: 20,
				is_next_page_true: true,
				searchValue: '',
				is_label_list_popup: false,
				circle_id: '',
				tabIndex:1,
				tabList:[
					{
						title:'行业客户'
					},
					{
						title:'同城客户'
					}
				],
				popup_user_contact: '',
				is_popup_user_contact: false,
				popup_user_contact_type: '',
				user_vip_tips: false, // 提醒用户开启VIP弹窗
				wechat_qrcode_img: '', // 微信二维码
			}
		},
		onLoad(options) {
			let that = this
			uni.getSystemInfo({
				success: function(res) {
					that.winHeight = res.windowHeight
				},
			});
			if(options.circle_id) {
				this.circle_id = options.circle_id || ''
			}
			this.getLabel();
		},
		/**
		 * 用户点击右上角分享
		 */
		// #ifdef MP
		onShareAppMessage: function() {
			wx.showShareMenu({
				withShareTicket: true,
				menus: ['shareAppMessage', 'shareTimeline']
			})
			return {
				title: '免费加微信，加客户微信，各行业客户微信，想加谁就加谁。',
				path: '/pages/extends/user/recommend_user'
			}
		},
		onShareTimeline: function() {
			return {
				query: {
					activceCate: this.productList[this.navActive] ? this.productList[this.navActive].store_category_id : 0,
				}
			}
		},
		// #endif
		onShow() {
			let that = this
			let routes = getCurrentPages();
			let curRoute = routes[routes.length - 1].route
			this.activeRouter = '/' + curRoute
			let pid = uni.getStorageSync('storeIndex')
			if(pid) {
				this.activceCate = pid
				uni.removeStorageSync('storeIndex');
			}
			if(this.activceCate){
				this.getCateFrom(this.productList)
				pid && setTimeout(()=>this.tap(this.pidIndex, 'b' + this.activceCate), 200);
			}
			that.getNav()
		},
		onHide() {},
		// //点击底部tabbar调用
		// onTabItemTap() {
		// 	this.getAllCategory();
		// },
		onReady() {
			this.isNodes++;
		},
		
		methods: {
			previewImage(url) {
				uni.previewImage({
					urls: [url],
					longPressActions :{
						itemList:['保存图片']
					},
				})
			},
			goRouter(item) {
				var pages = getCurrentPages();
				var page = (pages[pages.length - 1]).$page.fullPath;
				if (item.link == page) return
				uni.switchTab({
					url: item.link,
					fail(err) {
						uni.redirectTo({
							url: item.link
						})
					}
				})
			},
			getNav() {
				this.newData = this.navigation
				if (this.newData.status && this.newData.status.status) {
					uni.hideTabBar()
				} else {
					uni.showTabBar()
				}			
			},
			infoScroll: function() {
				let that = this;
				//this.number = that.productList[len - 1].children.length;
				//设置商品列表高度
				uni.getSystemInfo({
					success: function(res) {
						that.height = (res.windowHeight) * (750 / res.windowWidth) - 98;
					},
				});
				let hightArr = [];
				for (let i = 0; i < that.productList.length; i++) {
					let item = that.productList[i]
					/* if(!that.productList[i].children){
						continue;
					} */
					// for (let j = 0; j < that.productList[i].children.length; j++) {
						//获取元素所在位置
						let query = uni.createSelectorQuery().in(this);
						let idView = "#b" + item.label_id + i;
						query.select(idView).boundingClientRect();
						query.exec(function(res) {
							if(res[0]){
								let top = res[0].top;
								hightArr.push({top,i});
							}
						});
					// };
				};
				that.hightArr = hightArr;
			},
			onChangeTag(data) {
				this.is_label_list_popup = false;
				this.tap(data.index)
			},
			tap: function(index, is_reload = 0) {
				if(!is_reload && this.navActive == index) return false;
				this.navActive = index;
				let productList = this.productList[index];
				this.productList_children = productList.children ? this.$util.dataPagination(productList.children, 9) : [];
				this.$set(this, 'productList_children', this.productList_children);
				this.is_next_page_true = true;
				this.list_circle = [];
				this.label_id = productList.label_id;
				this.label_id2 = 0;
				this.navActive2 = -1;
				this.page = 1;
				this.getListUser();
			},
			tap2: function(label_id) {
				if(this.navActive2 == label_id) return false;
				this.navActive2 = label_id;
				this.is_next_page_true = true;
				this.list_circle = [];
				this.label_id2 = label_id;
				this.page = 1;
				this.getListUser();
			},
			setValue: function(event) {
				this.$set(this, 'searchValue', event.detail.value);
			},
			searchCircle() {
				// 重新定义请求状态
				this.is_next_page_true = true;
				// 数据清空
				this.list_circle = [];
				// 分页从1开始
				this.page = 1;
				this.getListUser();
			},
			/**
			 * 获取行业列表
			 */
			getLabel() {
				let that = this,
					customerIndustry = this.$Cache.get('customerIndustry'),
					engagedIndustry = this.$Cache.get('engagedIndustry'),
					circle_id = this.circle_id,
					is_sort = true;
				getLabelList({customerIndustry, engagedIndustry, is_sort, circle_id}).then(res=>{
					that.productList = res.data.list;
					that.productList_children = res.data.list[0].children ? that.$util.dataPagination(res.data.list[0].children, 9) : [];
					that.label_id = res.data.list[0].label_id;
					that.getListUser()
					that.$nextTick(function(){
						setTimeout(() => {
							// that.infoScroll();
							setTimeout(()=>that.tap(that.pidIndex, 'b' + that.activceCate),200);
						}, 300);
					})
					setTimeout(() => {
						that.showSkeleton = false
					}, 500)
				}).catch(err=>{
					console.log('err', err);
				})
			},
			async bindTab(index){
				this.tabIndex = index+1
				this.page =1
				this.is_next_page_true = true
				this.list_circle = [];
				await this.getListUser();
			},
			getListUser()
			{
				let that = this;
				if(!that.is_next_page_true) return false;
				let data = {
					tabId: that.label_id,
					page: that.page,
					limit: that.limit,
					circle_id: that.circle_id,
					type: that.tabIndex
				}
				let userAddress = {};
				if(that.$Cache.has('userAddress')){
					userAddress = that.$Cache.get('userAddress', true);
				}
				data = Object.assign({}, data, userAddress);
				recommendCustom(data).then(res => {
					if(res.status == 200)
					{
						that.list_circle = that.list_circle.concat(res.data.list)
						that.is_next_page_true = res.data.list.length >= that.limit;
						that.page++
					}
				}).catch(err=>{
				})
			},
			loadMoreData()
			{
				this.getListUser();
			},
			//获取首页分类来源
			getCateFrom: function(arr) {
				let i = ""
				arr.map((item, index) => {
					if ((this.activceCate && item.store_category_id == this.activceCate)) {
						this.pidIndex = index
						i = 'sort' + index
						return;
					}
				})
				this.$nextTick(() => {
					this.intoindex = i
				})
			},
			scroll: function(e) {
				return false;
				uni.$emit('scroll');
				let scrollTop = e.detail.scrollTop + 10;
				let scrollArr = this.hightArr;
				for (let i = 0; i < scrollArr.length; i++) {
					if (scrollTop >= scrollArr[i].top - scrollArr[0].top && scrollTop < (scrollArr[i + 1] ? scrollArr[i + 1].top : 0) - scrollArr[0].top) {
						this.navActive = scrollArr[i].i
					} else if (scrollTop >= scrollArr[scrollArr.length - 1].top - scrollArr[0].top) {
						this.navActive = scrollArr[scrollArr.length - 1].i
					}else if (scrollTop >= 0 && scrollTop < scrollArr[1].top - scrollArr[0].top) {
						this.navActive = 0
					}
				}
			},
			// 用户详情
			goUserDetail(uid) {
				this.$util.Tips('/pages/plantGrass/plant_user/index?id='+uid+'&is_service=1')
			},
			// 关注作者
			followAuthor: function(key, status) {
				if (this.isLogin === false) {
					this.isAuto = true;
					this.isShowAuth = true
				} else {
					let that = this;
					followAuthorApi(that.list_circle[key].uid,{status: status}).then(res => {
						if (res.status === 200) {
							that.list_circle[key].is_start = status
						}
						that.$util.Tips({
							title: res.message
						});
					}).catch(err=>{
						that.$util.Tips({
							title: err
						});
					});
				}
			},
			/**
			 * 查看会员联系方式
			 * @param {Object} uid
			 * @param {Object} contact_information
			 */
			getUserContactInformations(data, contact_information, is_weixin) {
				if(!this.isLogin) return this.$util.Tips({title:'请先登录'}, {tab: 1, url: '/pages/user/index'});
				let that = this;
				let uid = data.uid;
				if (!uid) return this.$util.Tips({title: '缺少请求用户'});
				getUserContactInformation({uid, contact_information, is_weixin}).then(res=>{
					if(contact_information == 'phone' && checkPhone(res.message)) {
						return uni.makePhoneCall({
							phoneNumber: res.message // 替换为你想拨打的电话号码
						  }).then(() => {
							console.log('拨打电话成功')
						  }).catch((error) => {
							console.log('拨打电话失败', error)
						  })
					} else {
						if (res.data && res.data.is_img == 1) {
							that.wechat_qrcode_img = res.data.data;
						} else {
							if (res.message) {
								that.popup_user_contact = res.message || '暂未设置该联系方式'
								that.popup_user_contact_type = contact_information;
								that.is_popup_user_contact = true;
							} else {
								uni.showModal({
									title: '温馨提示',
									content: '等待对方验证',
									showCancel: false,
								})
							}
						}
					}
				}).catch(err=>{
					if(err == '次数不足') {
						that.user_vip_tips = true;
						// that.pay_close = true;
					} else {
						that.$util.Tips({title: err});
					}
				})
			},
			copyUserContact() {
				let that = this;
				that.is_popup_user_contact = false;
				if(this.popup_user_contact && this.popup_user_contact!='暂未设置该联系方式') {
					uni.setClipboardData({
					  data: that.popup_user_contact,
					  success: function () {
						return that.$util.Tips({title:'复制成功'});
					  }
					})
				}else{
					return this.$util.Tips({title:'复制失败'});
				}
			},
			goUrl(url){
				uni.navigateTo({
					url:url
				})
			},
		}
	}
</script>
<style scoped lang="scss">
	.navTabBox{
		background: #fff;
		// height: 90rpx;
		border-bottom: 1px solid #000;
	}
	.longTab{
		display: flex;
		text-align: center;
		padding: 30rpx 0;
	}
	.tab-item{
		width: 50%;
		display: inline-block;
		line-height: 44rpx;
		position: relative;
		text{
			position: relative;
			display: inline-block;
			font-size: 36rpx;
			color: #1C211D;
		}
	}
	.tab-item:first-child {
		border-right: 1px solid #000;
	}
	.tab-item.on{
		color: var(--view-theme);
		text{
			font-size: 42rpx;
			font-weight: bold;
		}
		/* &:before{
			content: "";
			display: inline-block;
			width: 192rpx;
			height: 22rpx;
			background-color: var(--view-theme);
			position: absolute;
			left: 25%;
			bottom: 0;
		} */
	}
	.productSort {
		display: flex;
		flex-direction: column;
		width: 100%;
		.con-box {
			flex: 1;
			display: flex;
			overflow: hidden;
		}
		.search {
			padding: 20rpx 0 20rpx 30rpx;
			background-color: #fff;
		}
		.search .input {
			width: 598rpx;
			background-color: #f7f7f7;
			border-radius: 33rpx;
			padding: 0 35rpx;
			box-sizing: border-box;
			height: 66rpx;
		}
		.search .input input {
			width: 472rpx;
			font-size: 28rpx;
		}
		.search .input .placeholder {
			color: #bbb;
		}
		.search .input .iconfont {
			color: #000;
			font-size: 35rpx;
		}
		.search .bnt {
			width: 120rpx;
			text-align: center;
			height: 66rpx;
			line-height: 66rpx;
			font-size: 30rpx;
			color: #282828;
		}
	}
	.productSort .aside {
		// background-color: #fff;
		overflow-y: auto;
		overflow-x: hidden;
		width: 170rpx;
		height: 100%;
		overflow: hidden;
	}
	.productSort .aside .item {
		width: 100%;
		font-size: 26rpx;
		font-weight: 400;
		color: #313131;
		line-height: 38rpx;
		padding: 36rpx 0;
		text-align: center;
	}
	.productSort .aside .item_text {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		font-size: 30rpx;
		font-weight: 500;
		color: #000000;
		line-height: 44rpx;
		position: relative;
	}
	.productSort .aside .item.on {
		background-color: #fff;
		width: 100%;
		text-align: center;
		font-weight: bold;
		position: relative;
	}
	.productSort .aside .item.on::before{
		content: "";
		display: inline-block;
		width: 80%;
		height: 24rpx;
		background-color: #FFE103;
		position: absolute;
		bottom: 30rpx;
		left: 10%;
	}
	.productSort .conter {
		flex: 1;
		height: 100%;
		background-color: #fff;
		overflow: hidden;
	}
	.productSort .conter .listw {
		background: #ffff;
		position: sticky;
		top: 0;
	}
	.productSort .conter .listw .swiper_list_user {
		width: 100%;
		height: 250rpx;
	}
	.productSort .conter .listw .swiper_list_user .list_user {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		grid-gap: 20rpx;
		text-align: center;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
	}
	.productSort .conter .listw .children_label {
		background: #F6F7FB;
		border-radius: 32rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		padding: 10rpx;
		font-size: 26rpx;
		height: fit-content;
	}
	.productSort .conter .listw .children_label_on {
		background: #FFE103;
	}
	.productSort .conter .listw .title {
		height: 100rpx;
		align-items: center;
	}
	.productSort .conter .listw .title .line {
		width: 100rpx;
		height: 2rpx;
		background-color: #f0f0f0;
	}
	.productSort .conter .listw .title .name {
		font-size: 28rpx;
		color: #333;
		margin: 0 30rpx;
		font-weight: bold;
	}
  .productSort .conter .listw .title .list_title,
	.productSort .conter .listw .title uni-image,
	.productSort .conter .listw .title image{
		width: 110rpx;
		height: 26rpx;
		border-radius: 0;
	}
	.productSort .conter .list {
		flex-wrap: wrap;
		background: #fff;
		border-radius: 16rpx;
		padding-bottom: 26rpx;
	}
	.productSort .conter .list .item {
		width: 174rpx;
		margin-top: 26rpx;
	}
	.productSort .conter .list .item .picture,
	.productSort .conter uni-image,
	.productSort .conter .list .item image,
	::v-deep.easy-loadimage{
		width: 110rpx;
		height: 110rpx;
		border-radius: 50%;
	}
	.productSort .conter .list .item .name {
		font-size: 24rpx;
		color: #333;
		height: 56rpx;
		line-height: 56rpx;
		width: 120rpx;
		text-align: center;
	}
	.list-content {
		padding: 40rpx 30rpx 0;
	}
	.list {
		overflow: hidden;
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		grid-gap: 10rpx;
		.item-content {
			text-align: center;
			overflow: hidden;
			// position: relative;
			border: 1rpx solid #ccc;
			border-radius: 10rpx;
			padding: 10rpx 20rpx;
			.item-avatar {
				width: 98rpx;
				height: 98rpx;
				margin: 0 auto;
				position: relative;
				display: flex;
				flex-direction: column;
				align-items: center;
				image {
					width: 98rpx;
					height: 98rpx;
					border-radius: 50%;
				}
				.item-user-icon {
					position: absolute;
					bottom: -16rpx;
					width: 36rpx;
					height: 36rpx;
					image {
						width: 36rpx;
						height: 36rpx;
						border-radius: 50%;
					}
				}
			}
			.item-nickanme {
				font-size: 28rpx;
				font-weight: 500;
				color: #37393A;
				line-height: 40rpx;
				margin-top: 30rpx;
			}
			.item-label {
				font-size: 24rpx;
				font-weight: 400;
				color: #767676;
				line-height: 34rpx;
				margin-top: 6rpx;
			}
			.tab-wx {
				background-color: #05C436;
				color: #fff;
				width: 75%;
				font-weight: bold;
				    margin: 20rpx auto 0;
				padding: 5rpx;
				/* position: absolute;
				left: 20%;
				right: 20%;
				bottom: -20rpx; */
				font-size: 24rpx;
				border-radius: 50rpx;
			}
		}
	}
	// 人脉圈列表end
	.page-footer {
		position: fixed;
		bottom: 0;
		z-index: 30;
		display: flex;
		align-items: center;
		justify-content: space-around;
		width: 100%;
	height: calc(98rpx + constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
		height: calc(98rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
		box-sizing: border-box;
		border-top: 1px solid #F3F3F3;
		background-color: #fff;
		box-shadow: 0px 0px 17rpx 1rpx rgba(206, 206, 206, 0.32);
		padding-bottom: constant(safe-area-inset-bottom); ///兼容 IOS<11.2/
		padding-bottom: env(safe-area-inset-bottom); ///兼容 IOS>11.2/
		&.filter{
			filter: blur(2rpx);
		}
		.foot-item {
			display: flex;
			width: max-content;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			position: relative;
			.count-num {
				position: absolute;
				display: flex;
				justify-content: center;
				align-items: center;
				width: 40rpx;
				height: 40rpx;
				top: 0rpx;
				right: -15rpx;
				color: #fff;
				font-size: 20rpx;
				background-color: #FD502F;
				border-radius: 50%;
				padding: 4rpx;
			}
		}
		.foot-item image {
			height: 50rpx;
			width: 50rpx;
			text-align: center;
			margin: 0 auto;
		}
		.foot-item .foot-item-add {
			width: 100rpx;
			height: 100rpx;
			// margin-bottom: 70rpx;
		}
		.foot-item .txt {
			font-size: 26rpx;
		}
	}

// 展示用户手机号/微信弹窗
.popup_user_contact {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.5);
	z-index: 35;
	display: flex;
	align-items: center;
	justify-content: center;
	.popup_user_contact_c { 
		width: 480rpx;
		background-color: #fff;
		border-radius: 20rpx;
		text-align: center;
		.popup_user_contact_h {
			padding: 30rpx 30rpx 80rpx;
			border-bottom: 1rpx solid #DDDDDD;
			.popup_user_contact_t {
				font-size: 36rpx;
				font-weight: 550;
				color: #2C332D;
			}
			.popup_user_contact_u{
				font-size: 32rpx;
				font-weight: 550;
				color: #323232;
				margin-top: 32rpx;
				text {
					color: #F73D3B;
				}
			}
		}
		.popup_user_contact_b {
			padding: 20rpx 0;
			text-align: center;
			display: flex;
			flex-wrap: nowrap;
			align-items: center;
			.popup_user_contact_close {
				font-size: 28rpx;
				font-weight: 400;
				color: #666764;
				line-height: 40rpx;
				flex: 1;
			}
			.popup_user_contact_copy {
				font-size: 28rpx;
				font-weight: 400;
				color: #323232;
				line-height: 40rpx;
				border-left: 1rpx solid #DDDDDD;
				flex: 1;
			}
		}
	}
}
// 展示用户手机号/微信弹窗end
// VIP弹窗
.user_vip_back {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.5);
	z-index: 35;
}
.user_vip_content {
	background-color: #fff;
	position: fixed;
	top: 30%;
	left: 50rpx;
	right: 50rpx;
	z-index: 35;
	border-radius: 30rpx;
	padding: 30rpx;
	text-align: center;
	.user_vip_close {
		position: absolute;
		right: 10rpx;
		top: 10rpx;
		image {
			width: 70rpx;
			height: 70rpx;
		}
	}
	.user_vip_icon {
		margin: 0 auto;
		image {
			width: 140rpx;
			height: 130rpx;
			margin: 0 auto;
			display: block;
		}
	}
	.user_vip_tit  {
		margin-top: 20rpx;
	}
	.user_vip_messag {
		font-size: 32rpx;
		margin-top: 30rpx;
	}
	.user_vip_btn {
		font-weight: bold;
		background-color: #FDE515;
		display: inline-block;
		padding: 10rpx 50rpx;
		border-radius: 10rpx;
		margin-top: 30rpx;
		font-size: 42rpx;
	}
}
// VIP弹窗end
</style>